﻿
@{
    ViewBag.Title = "列表";
    var F = Html.F();
}

@section head {
    <style>
        img{max-height: 60px}
    </style>
}

@section body {
    @(F.Panel().ID("Panel1").BodyPadding(3).ShowBorder(false).ShowHeader(false).Layout(LayoutType.Fit).AutoScroll(true).IsViewPort(true)
        .Toolbars(F.Toolbar().Position(ToolbarPosition.Top).Items(
                F.Button().ID("Button_add").Icon(Icon.Add).Text("新增").OnClientClick("openWindow()"),
                F.ToolbarSeparator(),
                F.Button().ID("Button_delete").Icon(Icon.Delete).Text("批量删除").OnClientClick("getGridSelectedRows()"))
            )
            .Items(
                F.Grid().Layout(LayoutType.Fit).AllowPaging(true).IsDatabasePaging(true).EnableCheckBoxSelect(true).CheckBoxSelectOnly(true).ShowHeader(false).ShowBorder(true)
                .ID("Grid1").OnPageIndexChanged(Url.Action("Grid1_PageIndexChanged"),"Panel1").DataIDField("id").EnableTextSelection(true).EnableHeaderMenu(false)
                .Toolbars(F.Toolbar().Position(ToolbarPosition.Top)
                    .Items(
                        F.TextBox().ID("txb_keyword").EmptyText("关键词查询"),
                        F.Button().ID("btnSearch").Text("查询").Icon(Icon.SystemSearch).OnClientClick("onGridBind()")
                    )
            )
            .PageItems(
                F.ToolbarSeparator(),
                F.DropDownList().ID("ddlPageSize").Width(160).Label("每页记录数")
                    .Items(
                        F.ListItem().Text("10").Value("10"),
                        F.ListItem().Text("20").Value("20").Selected(true),
                        F.ListItem().Text("50").Value("50"),
                        F.ListItem().Text("100").Value("100")
                    ),
                F.ToolbarSeparator()
            )
            .Columns(
                //F.RowNumberField(),
                F.RenderField().HeaderText("编辑").ColumnID("Actions").Width(50).RendererFunction("renderActions")
                ,F.RenderField().HeaderText("标题").DataField("title").Width(100)
                ,F.RenderField().HeaderText("排序").DataField("sort").FieldType(FieldType.Int).TextAlign(TextAlign.Right).Width(100)
                ,F.RenderField().HeaderText("水印图片").DataField("pic").Width(200).RendererFunction("showpic")
                ,F.RenderField().HeaderText("效果图").DataField("pic2").Width(200).RendererFunction("showpic")
                , F.RenderField().HeaderText("添加水印").ColumnID("wm").Width(80).RendererFunction("renderWM")

            )
    ))
    @(F.Window().ID("Window1").Height(450).Width(650).IsModal(true).EnableMaximize(true).EnableIFrame(true).Hidden(true).Icon(Icon.ApplicationFormEdit).Target(Target.Top).EnableResize(true)
        .CloseAction(CloseAction.HidePostBack).OnClose(Url.Action("Grid1_PageIndexChanged"),"Panel1"))
}

@section script {
    <script>
        function onGridBind() {
            var grid1 = F.ui.Grid1;
            grid1.setPageIndex(0);
            // 触发后台事件
            F.doPostBack('@Url.Action("Grid1_PageIndexChanged")', "Panel1");
        }

        F.ready(function() {
            onGridBind();
            F.ui.ddlPageSize.on('change', function () { onGridBind() });

            var grid = F.ui.Grid1;
            grid.el.on('click', 'a.action', function (event) {
                var targetEl = $(this);
                var rowEl = targetEl.closest('.f-grid-row');
                var rowData = grid.getRowData(rowEl);
                var rowId = rowData.id;

                var btn = $(this);
                if (btn.hasClass('editit')) {
                    openWindow(rowId); // 编辑窗体
                }
                if (btn.hasClass('wm')) {
                    openMainTab(rowId); // 添加水印相关文件
                }
            });
        })

        function getGridSelectedRows() {
            F.confirm({
                message: "确定要执行选中行删除操作吗？",
                ok: function() {
                    var result ='', grid = F.ui.Grid1;
                    $.each(grid.getSelectedRows(true),
                        function(index, item) {
                            result +=','+item.id;// item.id对应绑定的.DataIDField("ID")的值;item.values.字段1 对应列DataField("字段1")
                        });
                    if (result.length == 0) {
                        NotifyQuestion("请选择要删除的选中行");
                        return;
                    }
                    F.doPostBack('@Url.Action("Button_delete_Click")', {ids: result});
                }
            })
        }

        function renderActions(value, params) {
            return '<a class="action editit" href="javascript:;">' +
                '<img class="f-grid-imagefield" src="' + F.baseUrl + 'res/icon/pencil.png">' +
                '</a>';
        }

        function renderWM(value, params) {
            return '<a class="action wm" href="javascript:;">' +
                '<img class="f-grid-imagefield" src="' + F.baseUrl + 'res/icon/image_magnify.png">' +
                '</a>';
        }

        function showpic(value, params) {
            if (value.length>0) return '<img src="' + value + '">';
            return "";
        }

        function openWindow(id) {
            if (id) {
                F.ui.Window1.show('@Url.Action("Add","waterMarkObj")'+"?id="+id, '编辑');
            } else {
                F.ui.Window1.show('@Url.Action("Add")', '新增');
            }
        }

        function openMainTab(value) {
            parent.addExampleTab({
                id: 'wmfile',
                iframeUrl: '@Url.Action("Index","wmfile")?wmid='+value,
                title: '设置水印信息',
                icon: '@Url.Content("~/res/images/filetype/vs_aspx.png")',
                refreshWhenExist: true
            });
        }
    </script>
}
